<template>
  <div class="contentPage">
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-icon name="revoke" @click="back" />
      </template>
    </van-nav-bar>

    <van-row>
      <van-col span="24">
        <van-image class="image_content" fit="cover" :src="'data:image/png;base64,' + content.photo" />
        <van-field v-model="content.content" rows="1" autosize type="textarea" />
        <van-image class="photo" round height="1.6rem" :src="'data:image/png;base64,' + content.userPhoto"
          @click="seeOne(content.userId)" />

        &nbsp;<span class="author">{{ content.username }}</span>
        &nbsp;<span class="sex">{{ content.sex }}</span>
        <div>
          &nbsp;<span class=" time">发布时间:{{ content.createTime }}</span>
        </div>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="20">
        <van-field class="message" v-model="message" rows="1" autosize label="留言" type="textarea" placeholder="请输入留言"
          @input="inputArea()" />
      </van-col>
      <van-col span="4">
        <van-button class="sub" v-show="show" round type="info" @click="submit">发布</van-button>
      </van-col>
    </van-row>
    <van-divider content-position="left">评论区</van-divider>
    <van-row>
      <van-col class="say" span="24" v-for="(item, i) in list" :key="i">
        <van-image class="photo" round height="1.6rem" :src="'data:image/png;base64,' + item.photo"
          @click="seeOne(item.userId)" />

        &nbsp;<span class="author">{{ item.username }}</span>
        <div>
          &nbsp;<span class="content">{{ item.message }}</span>
        </div>

        <div>
          &nbsp;<span class=" time">发布时间:{{ item.createTime }}</span>
        </div>
      </van-col>
    </van-row>

  </div>
</template>

<script>
export default {
  name: 'ContentPage',
  data() {
    return {
      content: '',
      message: '',
      show: false,
      list: [],

    }
  },
  created: function () {
    const contentId = this.$route.query.contentId
    this.$axios.get('http://localhost:9090/dazi/content/findById?id=' + contentId)
      .then(res => {
        this.content = res.data;
        this.$axios.get('http://localhost:9090/dazi/content/message/findByContentId?contentId=' + this.content.id)
          .then(res => {
            this.list = res.data;

          })

      })

  },
  methods: {

    submit() {
      const tel = window.localStorage.getItem('dazi_')
      const mes = {
        contentId: this.content.id,
        tel: tel,
        message: this.message
      }

      this.$axios.post('http://localhost:9090/dazi/content/message/save', mes)
        .then(res => {
          this.message = ''
          this.$axios.get('http://localhost:9090/dazi/content/message/findByContentId?contentId=' + this.content.id)
            .then(res => {
              this.list = res.data;
            })
        })
    },

    back() {
      history.back()
    },
    seeOne(userId) {
      this.$router.push({ path: '/seeOne', query: { userId: userId } })
    },
    inputArea() {
      if (this.message.length > 0) {
        this.show = true
      } else {
        this.show = false
      }
    },
  },
  computed: {

  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.image_content {
  width: 100%;
}

.message {
  margin: 10px 0;
}

.sub,
.say {
  margin: 10px 0;
}
</style>
